<template>
    <div :before-close="handleDialogClose" class="sys-add-form">
        <el-form :model="form" v-if="title===titleMap.addTitle||title===titleMap.editTitle">
            <el-form-item label="环线描述" :label-width="formLabelWidth">
                <el-input v-model="form.location_name"
                          autocomplete="off"
                          style="width: 300px" type="text"
                          :class="form.location_name.trim()===''&&issubmit?'iswarninput':'isnomarl'"
                          placeholder="请输入环线描述"></el-input>
            </el-form-item>

            <el-form-item label="序号" :label-width="formLabelWidth"  style="width: 300px">
                <el-input v-model="form.location_sort" autocomplete="off" type="text"
                          onkeyup="if(this.value.length==1){this.value=this.value.replace(/[^0-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}"
                          onafterpaste="if(this.value.length==1){this.value=this.value.replace(/[^0-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}">

                </el-input>
            </el-form-item>

        </el-form>
      <!--  <el-form :model="form" v-if="title===titleMap.addBuildTitle||title===titleMap.editBuildTitle">
            <el-form-item label="建筑类型" :label-width="formLabelWidth">
                <el-input v-model="form.building_type_name" autocomplete="off" style="width: 300px" type="text" placeholder="请输入建筑类型"></el-input>
            </el-form-item>

            <el-form-item label="序号" :label-width="formLabelWidth"  style="width: 300px">
                <el-input v-model="form.building_type_sort" autocomplete="off" type="text"
                          onkeyup="if(this.value.length==1){this.value=this.value.replace(/[^0-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}"
                          onafterpaste="if(this.value.length==1){this.value=this.value.replace(/[^0-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}">

                </el-input>
            </el-form-item>

        </el-form>
        <el-form :model="form" v-if="title===titleMap.addinfoTitle||title===titleMap.editinfoTitle">
            <el-form-item label="子栏目" :label-width="formLabelWidth">
                <el-input v-model="form.info_section_name" autocomplete="off" style="width: 300px" type="text" placeholder="请输入子栏目名"></el-input>
            </el-form-item>

            <el-form-item label="序号" :label-width="formLabelWidth"  style="width: 300px" v-if="nowtype!=='Consulting'">

            </el-form-item>

        </el-form>-->
        <div slot="footer" class="dialog-footer clear">
            <el-button type="primary" @click="submit">确 定</el-button>
            <el-button @click="closeDialog">取 消</el-button>

        </div>
    </div>
</template>

<script>

    export default {
        name: "SysLoopAddForm",
        props:['form','title','typetitle','nowtype'],
        data(){
            return{
                //是否批量，默认不批量
                numstate:false,
                issubmit:false,
                titleMap:{

                    addTitle:'添加环线',
                    editTitle:'修改环线',
                    addBuildTitle:'添加建筑',
                    editBuildTitle:'修改建筑',
                    addinfoTitle:'添加子栏目',
                    editinfoTitle:'修改子栏目',

                },
                addNum:1,
                formLabelWidth:'120px'
            }
        },
        methods:{
            //取消操作
            handleDialogClose(){
                this.$emit('onclose',false)
            },

            //规则。导入规则函数。

            closeDialog(){
                this.$emit('onclose',false)
            },
            addData(url,item){
                // console.log('添加~~~loop')
                // console.log(item)
                this.axios({
                    method:'post',
                    url:'/loop_line/addLoopLine',
                    data:item
                }).then(data=>{

                    // console.log('添加成功范湖数据')
                    // console.log(data)
                    this.$message({
                        type:'success',
                        message:data.data.msg
                    })
                    this.$emit('onclose',true)
                })
            },
            editData(url,item){
                // console.log('修改~~~~~~~~~~~~~~~~~~~')
                // console.log(item)
                this.axios({
                    method:'post',
                    url:url,
                    data:item
                }).then(data=>{

                    // console.log('修改成功范湖数据')
                    // console.log(data)
                    this.$message({
                        type:'success',
                        message:data.data.msg
                    })
                    this.$emit('onclose',true)
                })

            },
            checkinput(){
                // console.log('输入为空')
                this.issubmit=true
                this.$message({
                    type:'error',
                    message:'操作失败，有未填写的项目存在。'
                })
            },
            submit(){
                // console.log('this.title')
                if (this.nowtype==='LoopLine'){
                  if (this.form.location_name.trim()===''){
                        this.checkinput()
                    }
                    else {
                      // console.log(111111111111111)
                      // console.log(this.form.location_id)
                         if (this.form.location_id===''||this.form.location_id===undefined){
                    //添加

                        this.addData('/loop_line/addLoopLine',this.form)
                        }else{
                            this.editData('/loop_line/updateLoopLine',this.form)
                        }
                  }
                }else if(this.nowtype==='Traffic1'){

                }else {

                      }
        }
    }}
</script>

<style lang="less" scoped>
    .sys-add-form{
background-color: white;


            position: fixed;
            z-index: 999;
            box-shadow: 10px 10px 20px rgba(63, 168, 122, 0.49);
            top:200px;
            right:20px;
            height:278px ;
            width: 500px;
            border-radius: 18px;
            padding:40px 20px 30px;
            box-sizing: border-box;
            border: 1px solid white;

        .el-input{

            input::-webkit-outer-spin-button,
            input::-webkit-inner-spin-button {
                -webkit-appearance: none !important;
                margin: 0;
            }

        }
        .iswarninput{
            border-radius: 4px;
            border: 1px solid red;
        }
        .dialog-footer{
            width: 100%;
            display: flex;
            justify-content: center;
            .el-button{
                margin: 0 25px;
            }
        }
    }


</style>